Hello.
In this lecture we are going to implement some mouse control.
We've already implemented keyboard's controls so we're going to implement mouse controls so that it
is easier for the mouse to walk with the key board control so you can easily control the paddle with
the movement of the mouse.
So let's begin to do that to listen out for the movement on the mouse.
We need to have a event listener.
So I'm going to add an event listener along saw a mouse move handler that will handle the movement of
the mouse when the event listener triggers it off.
So less to that.
So we've already got in in our script you've already caught too many listeners here for the key down
and key up so we just need to add another one here for the mouse movement to listen up for the mouse
movement to save time.
I have already included the line here online fifty two.
So as a documented AD event listener and in the parent this is home got the mouse moves with an A now
fully meant mouse Wolf and this mouse move handler will handle the event.
So the values set to force goes when the mouse.
There's no more men than a mouse to force the next thing we need to do is find a way to kind of like
call the movement of the paddle to the movement of the mouse so you can control the paddle with the
mouse.
To do that we can create a function called moose mouse move handler and will use that tool and call
the pad of movement to the mouse movement.
So I create them.
The function here from the line 74 to 81 this function called mouse move handler will be responsible
for anchoring the pad and movement to the movement of the mouse.
So what this means is that you can update the position of the paddle based on the poynton or denied
them in base on which way the mouse pointer moves.
All right so the the way this function here works is that it will work out a reality of x value which
will be equal to the horizontal mouse position in the viewpoint that is the egolf Client X..
All right.
Mine was the distance between the left edge of the compass and the left edge of the viewport or would
become covers offset to the left.
Right so effectively what this means is that this will be opposed to the distance between the compass
on the left side of the edge and the mouse pointer.
So if the relative point out position is greater than zero and below a lower than the compass with the
point that is within the canvass boundaries and the panel x position will be called on the left edge
of the panel.
Okay and then this will be set to be relative to the x value.
My loss half the width of the panel so that movement will openly be relative to the middle of the panel
right.
So what this will mean effectively is that the panel will now follow the position of the mouse cursor
so anywhere the go move the cursor the paddle will morph.
This will make it a lot easier to use the pad to control the movement of the ball.
All right so I'll just save my work and then I can run it.
You can see what the code look facts.
Alright so this is what.
Okay so you can see now the mouse.
See Is he out to morph a lot easier to the mouse pointer.
Is relative.
To see that it makes it a lot easier.
Holiday and moving them with my.
You can see that a lot easier than just using the arrows on the keyboard.
All right see that a lot easier.
And that's me using my mouse.
So with the mouse now is effective in controlling the paddle.
Super.
Excellent.
So that's it.
We are done with this game.
So we have successfully completed the development of a two week game using hastier male 5 and pure javascript.
Thank you so much.
Please let me know if you have any questions on any of the sections in this course.
I'd be more than happy to help.
Try and practice as much as possible.
Try and change someone the values we have used and I will recommend you change live to values at a time
so that if you do make errors it's easier to trace back the changes you have made.
Thank you so much for your time.
Take care and bye for now.